
var id = location.search.substr(1).split('=');
var user = {};
user[id[0]] = id[1];

if (!user.user_id) {
  location.href = '../html/Designer.html';
}

var xhr = new XMLHttpRequest();
xhr.open('get', `https://muse.huaban.com/api/v1/users/${user.user_id}/`);
xhr.send();
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  renderUser(data);
  console.log(data);

  localStorage.setItem('userData', JSON.stringify(data));
}
var unit = {
  designer: '设计师',
  illustrator: '插画/漫画师',
  ui_designer: 'UI/UX设计师',
  artisan: '手工艺人',
  photographer: '摄影师',
  industrial_designer: '工业设计师',
  animator: '动画师',
  other: '其他'
}

function renderUser(data) {
  var img = document.querySelector('.userDetails .left img');
  img.src = `https://hbimg.huaban.com/${data.avatar.key}_/both/120x120`;

  var username = document.querySelector('.username');
  username.innerHTML = data.username;

  var tag = document.querySelector('.tag');
  tag.innerHTML = data.category.map(function (item) {
    return `<i>${unit[item]}</i>`
  }).join(' · ')

  var city = document.querySelector('.city');
  city.innerHTML = data.city;

  var desc = document.querySelector('.desc');
  desc.innerHTML = data.desc;

  var time = document.querySelector('.time');
  time.innerHTML = formate(data.extra.response_time);

  var rating = document.querySelector('.rating');
  var str = '';
  var num = data.extra.rating;
  for (var i = 0; i < num; i++) {
    str += `<i class="iconfont icon-star active"></i>`
  }
  rating.innerHTML = str;
}

function formate(num) {
  var f;
  var s;
  var t;
  var day;
  if (num >= 60) {
    f = parseInt(num / 60);
    s = num % 60;
  }
  if (f >= 60) {
    t = parseInt(f / 60);
    f = f % 60;
  }
  if (t >= 24) {
    day = parseInt(t / 24);
    t = t % 24;
  }
  var unit = {
    f: '分',
    s: '秒',
    t: '时',
    day: '天'
  }
  //判断
  if (day && t && f) {
    return `${day}天${t}时${f}分${s}秒`
  } else if (t && f) {
    return `${t}时${f}分${s}秒`
  } else if (f) {
    return `${f}分${s}秒`
  } else {
    return `${num}秒`
  }
}

function getData() {
  var xhr = new XMLHttpRequest();
  xhr.open('get', `https://muse.huaban.com/api/v1/users/${user.user_id}/services/?limit=100`);
  xhr.send();
  xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    var ul = document.querySelector('.list ul');
    ul.classList.remove('userlist');
    ul.innerHTML = data.map(function (item) {
      return `<li>
                <img service_id="${item.service_id}" src="https://muse-img.huaban.com/${item.cover[0].key}_/both/280x280" alt="">
                <h3>${item.name}</h3>
                <p>${item.price == 0 ? '价格面议' : `￥${item.price}/${item.unit}`}</p >
              </li>`
    }).join('')
  }
}
getData();

function getData2() {
  var xhr = new XMLHttpRequest();
  xhr.open('get', `https://muse.huaban.com/api/v1/users/${user.user_id}/boards`);
  xhr.send();
  xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    var ul = document.querySelector('.list ul');
    ul.classList.remove('userlist');
    ul.innerHTML = data.map(function (item) {
      return `<li>
                <img src="https://hbimg.huaban.com/${item.cover.key}_/both/280x280" alt="">
                <h3 style="border-top:1px solid #ddd;padding-top:10px;margin-top:30px；margin-bottom:20px;">${item.title}</h3>
                <p style="color:#999;font-size:12px;">${item.pin_count}张图片</p >
              </li>`
    }).join('')
  }
}

function render() {
  var data = JSON.parse(localStorage.getItem('userData'));
  console.log(data);
  var ul = document.querySelector('.list ul');

  ul.classList.add('userlist');
  ul.innerHTML = `
    <li>
      <span>所在地</span>
      <span>${data.city}</span>
    </li>
    <li>
      <span>擅长领域</span>
      <span>
      ${data.category.map(function (item) {
    return `<i>${unit[item]}</i>`
  })}
      </span>
    </li>
    <li>
      <span>实名认证</span>
      <span>已认证</span>
    </li>
    <li>
      <span>评分</span>
      <span>${data.extra.rating}</span>
    </li>
    <li>
      <span>响应时间</span>
      <span>${formate(data.extra.response_time)}</span>
    </li>
    <li>
      <span>个人简介</span>
      <span>${data.desc}</span>
    </li>
    `
}

var listBtn = document.querySelectorAll('.navList li');
for (var i = 0; i < listBtn.length; i++) {
  listBtn[i].onclick = function () {
    if (this.innerHTML == '设计服务') {
      getData();
    } else if (this.innerHTML == '原创') {
      getData2();
    } else if (this.innerHTML == '个人资料') {
      render()
    }

    for (var j = 0; j < listBtn.length; j++) {
      listBtn[j].classList.remove('active');
    }
    this.classList.add('active')
  }
}
